<script setup lang="ts" name="JxtechUserDialogExt">
import { reactive, ref, Ref, watch, nextTick } from "vue";
import { JxtechUserDialog } from "@whjxtech/jxtech-component";
import type { JxtechSelectUser } from "@whjxtech/jxtech-component";
import queryUserServiceApi from "@/api/modules/org/query/query-user";
import { orgUnitTree } from "@/api/modules/org/tree";
import { downloadFileUrl } from "@/api/modules/org/file-attachment";
import userBeanServiceApi from "@/api/modules/org/bean/user-bean";

interface JxtechUserDialogExtProps {
  /**已选用户id */
  selectUserIds?: string;
  /**已选用户text */
  selectUserTexts?: string;
  /**选择模式 单选or多选 */
  multiple?: boolean;
  /**自定义属性key label children isLeaf */
  treeProps?: any;
  /**默认展开的key */
  defaultExpandedKeys?: string[];
  /**dialog对话框是否显示 */
  visible?: boolean;
  /**需要那个ID作为双向数据绑定 */
  idKye?: "userId" | "userDeptId";
}

const emit = defineEmits<{
  (e: "update:visible", val: boolean): void;
  /**id双向绑定 */
  (e: "update:selectUserIds", val: string): void;
  /**text双向绑定 */
  (e: "update:selectUserTexts", val: string): void;
  /**点击确认触发事件 */
  (e: "finish", ids: string, texts: string, array: Array<JxtechSelectUser>): void;
  /**点击取消触发事件 */
  (e: "cancel"): void;
}>();

const props = withDefaults(defineProps<JxtechUserDialogExtProps>(), {
  selectUserIds: "",
  selectUserTexts: "",
  multiple: false,
  treeProps: () => ({
    id: "id",
    label: "text",
    children: "children",
    isLeaf: "leaf"
  }),
  defaultExpandedKeys: () => ["10000"],
  visible: false,
  idKye: "userId"
});

const visibleModelValue = ref(props.visible);
watch(
  () => props.visible,
  value => {
    visibleModelValue.value = value;
  }
);
watch(visibleModelValue, value => {
  emit("update:visible", value);
  if (value) {
    // nextTick(() => {});
  }
});
const selectUserIdsModelValue = ref(props.selectUserIds);
watch(
  () => props.selectUserIds,
  value => {
    selectUserIdsModelValue.value = value;
  }
);
watch(selectUserIdsModelValue, value => {
  emit("update:selectUserIds", value);
});
const selectUserTextsModelValue = ref(props.selectUserTexts);
watch(
  () => props.selectUserTexts,
  value => {
    selectUserTextsModelValue.value = value;
  }
);
watch(selectUserTextsModelValue, value => {
  emit("update:selectUserTexts", value);
});

const JxtechUserDialogExtState = reactive({
  infoLoadData: (userId: string) => {
    return userBeanServiceApi.queryById(userId, { refCols: "default" });
  },
  userLoadData: (queryParams: { unitId: string; id: string; subOrgId: string; likeAll: null | string; refCols: string }) => {
    return queryUserServiceApi.userList(queryParams);
  },
  treeLoadData: (queryParams: { id: string }) => {
    return orgUnitTree(queryParams);
  },
  onFinish: (ids: string, texts: string, array: Array<JxtechSelectUser>) => {
    emit("finish", ids, texts, array);
  },
  onCancel: () => emit("cancel")
});
</script>

<template>
  <jxtech-user-dialog
    :download-file-url="downloadFileUrl"
    :info-load-data="JxtechUserDialogExtState.infoLoadData"
    :user-load-data="JxtechUserDialogExtState.userLoadData"
    :tree-load-data="JxtechUserDialogExtState.treeLoadData"
    v-model:select-user-ids="selectUserIdsModelValue"
    v-model:select-user-texts="selectUserTextsModelValue"
    :multiple="multiple"
    :tree-props="treeProps"
    :default-expanded-keys="defaultExpandedKeys"
    v-model:visible="visibleModelValue"
    :id-kye="idKye"
    @finish="JxtechUserDialogExtState.onFinish"
    @cancel="JxtechUserDialogExtState.onCancel"
  ></jxtech-user-dialog>
</template>

<style lang="scss" scoped></style>
